<template>
  <div class="container">
    <van-nav-bar
      left-arrow
      @click-left="goBack"
      @click-right="onDetail"
    >
      <template v-if="titleVisible" #title>
        hello
      </template>
      <template #right>
        <van-icon name="ellipsis" color="#000" />
      </template>
    </van-nav-bar>
    <section @scroll="onScroll">
      <header ref="header">
        <div class="title">{{ articleDetail.title }}</div>
        <div class="time">
          {{ getTime(articleDetail.pubdate) }} | {{ articleDetail.read_count }}阅读 | {{ articleDetail.comm_count }}评论
        </div>
        <!-- 头像用户名 -->
        <van-cell
          class="header-info"
          value-class="user-info-btn"
          title-class="sub-title"
          :border="false"
        >
          <van-button
            class="follow-btn"
            :color="articleDetail.is_followed ? undefined : 'orange'"
            size="small"
            @click="follow(articleDetail.is_followed ? 'unfollow' : 'follow', articleDetail.aut_id)"
            round
          >
            {{ articleDetail.is_followed ? '取消关注' : '+关注' }}
          </van-button>
          <template #title>
            <div class="avatar">
              <img :src="articleDetail.aut_photo" alt="">
            </div>
            <span>{{ articleDetail.aut_name }}</span>
          </template>
        </van-cell>
      </header>
      <!-- 文章内容 -->
      <div v-html="articleDetail.content" />
      <div class="footer-time time">发布文章时间：{{ getTime(articleDetail.pubdate) }}</div>
      <!-- 评论列表 -->
      <van-cell
        :title="`全部评论(${ articleDetail.comm_count })`"
        :value="`${ articleDetail.like_count }点赞`"
      />
      <comment-item
        v-for="comment in commentList"
        :key="comment.com_id"
        :likeCount="comment.like_count"
        :avatarURL="comment.aut_photo"
        :author="comment.aut_name"
        :content="comment.content"
        :replyCount="comment.reply_count"
        :timestamp="comment.pubdate"
        :isLiked="comment.is_liking"
        @onLike="onCommentLike(comment.is_liking ? 'unlikeComment' : 'likeComment', comment.com_id)"
      />
    </section>
    <van-goods-action class="nav">
      <van-search
        left-icon="edit"
        placeholder="抢沙发..."
        shape="round"
        @click="openCommentPopup"
      />
      <van-goods-action-icon icon="chat-o" text="评论" :badge="articleDetail.comm_count"/>
      <van-goods-action-icon
        :icon="`good-job${ articleDetail.attitude === 1 ? '' : '-o' }`"
        text="点赞"
        @click="operateArticle(articleDetail.attitude === 1 ? 'unlikeArticle' : 'likeArticle')"
      />
      <van-goods-action-icon
        :icon="`like${ articleDetail.is_collected ? '' : '-o' }`"
        text="收藏"
        @click="operateArticle(articleDetail.is_collected ? 'cancelCollectArticle' : 'collectArticle')"
      />
      <van-goods-action-icon icon="share-o" text="分享" @click="onClickIcon" />
    </van-goods-action>
    <!-- 评论弹出层 -->
    <van-popup
      v-model="commentPopupVisible"
      position="bottom"
    >
      <div class="comment-popup">
        <van-nav-bar
          title="评论文章"
          left-arrow
          @click-left="closeCommentPopup"
          @click-right="onCommentSubmit"
        >
          <template #right>
            <span class="comment-submit-btn">发表</span>
          </template>
        </van-nav-bar>
        <van-field
          class="comment-content"
          v-model="commentContent"
          rows="2"
          autosize
          type="textarea"
          placeholder="说点什么~"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import moment from 'moment';
import * as api from '@/api/article';
import 'highlight.js/styles/vs2015.css';

let headerHeight = 0;

export default {
  data () {
    return {
      commentPopupVisible: false,
      commentContent: '',
      titleVisible: false,
    };
  },
  computed: {
    ...mapState('article', [
      'articleDetail',
      'commentList',
    ]),
  },
  methods: {
    ...mapActions('article', [
      'updateArticleDetail',
      'updateCommentList',
    ]),
    // 滚动条事件
    onScroll (e) {
      this.titleVisible = e.target.scrollTop > headerHeight;
    },
    // 导航栏右侧图标
    onDetail () {
      // to do
    },
    // 返回上级
    goBack () {
      this.$router.go(-1);
    },
    getTime (time) {
      return moment(time).format('YYYY年MM月DD日');
    },
    async follow (type, id) {
      // type: 'follow' || 'unfollow'
      const msg = await api[type](id);
      this.$toast(msg);
      // 关注完 刷新文章信息
      this.updateArticleDetail(this.$route.query.id);
    },
    // // 关注作者
    // async follow (id) {
    //   const msg = await api.follow(id);
    //   this.$toast(msg);
    //   // 关注完 刷新文章信息
    //   this.updateArticleDetail(this.$route.query.id);
    // },
    // // 取消关注作者
    // async unfollow (id) {
    //   const msg = await api.unfollow(id);
    //   this.$toast(msg);
    //   // 关注完 刷新文章信息
    //   this.updateArticleDetail(this.$route.query.id);
    // },
    // 操作文章(点赞收藏)
    async operateArticle (type) {
      const msg = await api[type](this.$route.query.id);
      this.$toast(msg);
      this.updateArticleDetail(this.$route.query.id);
    },
    // 点击弹出评论弹出层
    openCommentPopup () {
      this.commentPopupVisible = true;
    },
    // 点击关闭评论弹出层
    closeCommentPopup () {
      this.commentPopupVisible = false;
    },
    // 发表评论按钮
    async onCommentSubmit () {
      if (!this.commentContent) {
        this.$notify('评论内容不能为空');
        return;
      }
      const res = await api.commentArticle(this.$route.query.id, this.commentContent);
      this.closeCommentPopup();
      this.$toast(msg);
      this.updateArticleDetail(this.$route.query.id);
    },
    // 点赞评论
    async onCommentLike (type, id) {
      const msg = await api[type](id);
      this.$toast(msg);
      this.updateCommentList(this.$route.query.id);
    },
    onClickIcon () {

    },
  },
  async created () {
    this.updateCommentList(this.$route.query.id);
    // 1. 等请求回来
    await this.updateArticleDetail(this.$route.query.id);
    // 2. 等渲染完成
    this.$nextTick(() => {
      headerHeight = this.$refs.header.offsetHeight;
    });
  },
}
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  section {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;

    .title {
      font-size: 20px;
    }

    .time {
      font-size: 12px;
      color: #aaa;
      margin-top: 4px;
    }

    .header-info {
      background: transparent;
      padding: 32px 0;
      border-bottom: 1px solid #e9e9e9;
    }
    .user-info-btn {
      font-size: 12px;
      flex: none;
      display: flex;
      align-items: center;
    }
    .avatar {
      height: 48px;
      width: 48px;
      box-sizing: border-box;
      border: 2px solid #ccc;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
      }
    }
    .sub-title {
      display: grid;
      grid-template-columns: 48px 1fr;
      grid-gap: 8px;
      align-items: center;
      font-size: 18px;
    }
    .follow-btn {
      padding: 0 16px;
    }
    .footer-time {
      text-align: right;
    }
  }

  .nav {
    position: relative;
  }
}
.comment-popup {
  height: 100vh;
  width: 100vw;

  .comment-submit-btn {
    color: orange;
  }

  .comment-content {
    background: #f5f5f5;
    margin: 16px;
    border-radius: 8px;
    width: calc(100% - 32px);
  }
}
</style>